<div [formGroup]="configuration.formGroupReference">
    <label class="row">
        <span class="col-4 col-form-label">
            {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
        </span>
        <span class="col">
            <input
                type="text"
                [formControlName]="zipControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ zipControlId }}"
                placeholder="{{ labelTranslationKey | translate }}"
                [required]="configuration.required"
            />
            <app-form-input-error
                class="invalid-feedback"
                [formGroupReference]="configuration.formGroupReference"
                [formControlId]="zipControlId"
            >
            </app-form-input-error>
        </span>
        <span class="col">
            <input
                type="text"
                [formControlName]="zipExtensionControlId"
                class="form-control qa-{{ configuration.qaPrefix }}-{{ zipExtensionControlId }}"
                placeholder="{{ 'form.labels.zip_ext' | translate }}"
                [required]="false"
            />
            <app-form-input-error
                class="invalid-feedback"
                [formGroupReference]="configuration.formGroupReference"
                [formControlId]="zipExtensionControlId"
            >
            </app-form-input-error>
        </span>
    </label>
</div>
